<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.9.0.custom.css" />	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>										<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/widgets.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->

<title>維護主機</title>

<script type="text/javascript">

$(document).ready(function() {
	$("#grid1").jqGrid({
		url:'QueryHost',
		datatype: "json",
	   	colNames:["主機IP", "主機名稱","PORT","系統","子系統"],
	   	colModel:[
	   		{name:"hostIP",index:"hostIP", editable:true, edittype:"text",editrules:{custom:true,required:true,custom_func:function(){
	   			var htip = $("input#hostIP")[0].value;
	   			return [checkIP(htip),"請輸入格式正確的IP值"];
	   		}},editoptions: {size:15, maxlength: 15}},
	   		{name:"hostName",index:"hostName", editable:true, edittype:"text",editrules:{custom:true,required:true,custom_func:function(){
	   			var selectedValue = $("option:selected");
	   			var isAllSeclected = true;
	   			var noSelectItem = "";
	   			$.each(selectedValue,function(i,res){
	   				var val = res.value;
	   				if (val == "noSelect") {
	   					isAllSeclected = false;
	   				}
	   			});
	   			return [isAllSeclected,"尚有未選擇的欄位"];
	   		}}},
	   		{name:"port",index:"port", editable:true, edittype:"text",editrules:{integer:true,required:true},editoptions: {size:5, maxlength: 5}},
	   		{
	   			name:"bss",index:"bss",
	   			editable:true,
	   			edittype:"select",
	   			editoptions:{
	   				value:"noSelect:--請選擇--",
	                dataEvents: [{
	                	type: "click",
	                	fn: function(e2) {
	                		var isBssSysFirstSelected = $("#isBssSysFirstSelected").attr("isBssSysFirstSelected");
	                		if (isBssSysFirstSelected == "true") {
	                			insertOption("bss","QueryBSS","add","");
	                			$("#isBssSysFirstSelected").attr("isBssSysFirstSelected",false);
	                		}
	                	}
	                },{
	                	type: "change",
	                	fn: function(e2) {
	                		$("#bssId")[0].value = $(".FormElement#bss option:selected").val();
	                		insertOption("subSys","QuerySubSys","add","");
	                	}
	                }]
			    }
	   			
	   		},
	   		{
	   			name:"subSys",index:"subSys",
	   			editable:true,
	   			edittype:"select",
	   			editoptions:{
	   				value:"noSelect:--請選擇--"
			    }
	   		}
	   	],
	   	width:460,
	   	rowNum:4,
	   	pager: "#pager",
		multiselect: false,
		rownumbers: true,
	   	viewrecords: true,	
		caption: "維護主機"
	});
	jQuery("#grid1").jqGrid("navGrid","#pager",{add:true,edit:true,del:true},
	{	// Edit
		url: "ManipulateGridHosts",
		mtype: "POST",
		beforeInitData : function(formid) {
			var bssId = getColVal("grid1","bss",true);
			var subSysId = getColVal("grid1","subSys",true);
			insertOption("bss","QueryBSS","edit",bssId);
			$("#isBssSysFirstSelected").attr("isBssSysFirstSelected",false);

			/**	變更前先將目前的主鍵的值寫入Form以傳入後台 **/
			$("#oriBssId")[0].value = bssId;
			$("#oriSubSysId")[0].value = subSysId;
			$("#oriHostIP")[0].value = getColVal("grid1","hostIP",false);
			$("#oriPort")[0].value = getColVal("grid1","port",false);
			
			/**	此為下拉bar之用 **/
			$("#bssId")[0].value = bssId;
			$("#subSysId")[0].value = subSysId;
			insertOption("subSys","QuerySubSys","edit",subSysId);
		},
		editData: { 
			oriBssId: function() { return $("#oriBssId")[0].value; },
			oriSubSysId: function() {	return $("#oriSubSysId")[0].value; },
			oriHostIP: function() {	return $("#oriHostIP")[0].value; },
			oriPort: function() {	return $("#oriPort")[0].value; }
		}
	},
	{	// Add
		url: "ManipulateGridHosts",
		mtype: "POST"
	},
	{	// Delete
		url: "ManipulateGridHosts",
		mtype: "POST",
		delData: { 
			hostIP: function() { return getColVal("grid1","hostIP",false); },
			bssId: function() {	return getColVal("grid1","bss",true); },
			subSysId: function() {	return getColVal("grid1","subSys",true); },
			port: function() {	return getColVal("grid1","port",false); }
		}
	});
	 
});
</script>

</head>
<body>
	<div id="funcDisplay">
		維護主機
	</div>
	<form id="q_form">
		<input type="hidden" id="getDataType" name="getDataType" />
		<input type="hidden" id="bssId" name="bssId" />
		<input type="hidden" id="subSysId" name="subSysId" />
		<input type="hidden" id="envId" name="envId" />
		
		<!-- 用來進行 Update時使用 -->
		<input type="hidden" id="oriHostIP" name="oriHostIP" />
		<input type="hidden" id="oriBssId" name="oriBssId" />
		<input type="hidden" id="oriSubSysId" name="oriSubSysId" />
		<input type="hidden" id="oriPort" name="oriPort" />
		<input type="hidden" id="hostName" name="hostName" />
		
	</form>
	<input type="hidden" id="isBssSysFirstSelected" isBssSysFirstSelected=true />	<!-- 判定系統的下拉選擇，是否被按過 -->
	
	<br/>

<table id="grid1"></table>
<div id="pager"></div>


</body>
</html>